<template>
  <view class="content">
    <view class="head">
      <u-navbar leftIcon="arrow-leftward" :placeholder='true' @leftClick="leftClick('/pages/mine/index')"
                title="數據分析" :rightText="currentIndex==1?'日期篩選' : ''" @rightClick="rightClick"></u-navbar>
    </view>
    <view class="main">
      <view class="nav">
        <view :class="['nav-item', { active: currentIndex === index }]" @click="changeTab(index)"
              v-for="(item,index) in navItems" :key="index">
          {{ item }}
        </view>
      </view>
      <!-- 表格分析 -->
      <view v-if="currentIndex==0" class="table">
        <u-collapse :border="false" @change="change" @close="close" @open="open">
          <u-collapse-item title="選擇展示項" name="Docs guide">
            <view class="cbox">
              <view class="all">
                <u-checkbox-group v-model="checkboxValue2" placement="column" @change="Allchange">
                  <u-checkbox :checked="allchecked" activeColor="#645AED"
                              :customStyle="{marginBottom: '8px'}" label="全选" name="全选">
                  </u-checkbox>
                </u-checkbox-group>
              </view>
              <view class="child" style="margin-left: 55rpx;">
                <u-checkbox-group v-model="checkboxValue1" placement="column">
                  <u-checkbox activeColor="#645AED" :customStyle="{marginBottom: '8px'}"
                              v-for="(item, index) in options" :key="index" :label="item.value"
                              :name="item.label" :checked="item.check" @change="checkboxChange(item)">
                  </u-checkbox>
                </u-checkbox-group>
              </view>
            </view>
          </u-collapse-item>
        </u-collapse>
        <view class="title">
          選擇時間
        </view>
        <view class="cbox1">
          <view class="cbox-item" @click="toStart">
            <view class="time-item">
              {{ beginTime || '开始日期' }}
            </view>
          </view>
          <view class="lines" style="color:#BEBEBE ;">-</view>
          <view class="cbox-item" @click="toEnd">
            <view class="time-item">
              {{ endTime || '结束日期' }}
            </view>
          </view>
        </view>
        <view class="title">
          選擇子公司/分行
        </view>
        <view class="cel_box" @click="togglePart('isPart')">
          <!-- 下拉选择器 -->
          <view class="sel_ipt">
            <view :class="department?'':'fontclor'">{{ department ? department : '選擇子公司/分行' }}</view>
            <!--            <u&#45;&#45;input disabled placeholder="请选择部门" border="none" v-model="department" shape="circle"></u&#45;&#45;input>-->
          </view>
          <!-- <image src="../../../static/images/unfold_gray.png" style="width: 30rpx;height: 30rpx;"></image> -->
          <u-icon name="arrow-down" size="28rpx"></u-icon>
          <view v-if="isPart" class="part_box">
            <scroll-view v-if="isPart" scroll-y="true" style="height: 300rpx;">
              <view class="part_item" :class="actIndex==index?'act_part':''"
                    v-for="(item,index) in branchlist" :key="index" @click="lookOne(item,index)">
                {{ item.branchname }}
              </view>
            </scroll-view>
          </view>
        </view>
        <view class="title">
          選擇部門
        </view>
        <view class="cel_box" @click="togglePart('isPart1')">
          <!-- 下拉选择器 -->
          <view class="sel_ipt">
            <!--            <u&#45;&#45;input placeholder="请选择部门" border="none" v-model="department1" shape="circle"></u&#45;&#45;input>-->
            <view :class="department1?'':'fontclor'">
              {{ department1 ? department1 : '请选择部门' }}
            </view>
          </view>
          <!-- <image src="../../../static/images/unfold_gray.png" style="width: 30rpx;height: 30rpx;"></image> -->
          <u-icon name="arrow-down" size="28rpx"></u-icon>
          <view v-if="isPart1" class="part_box">
            <scroll-view v-if="isPart1" scroll-y="true" style="height: 300rpx;">
              <view class="part_item" :class="actIndex==index?'act_part':''"
                    v-for="(item,index) in member" :key="index" @click="lookOne1(item,index)">
                {{ item.departmentname }}
              </view>
            </scroll-view>
          </view>
        </view>
        <view class="title">
          選擇人員
        </view>
        <view class="cel_box" @click="togglePart('isPart2')">
          <!-- 下拉选择器 -->
          <view class="sel_ipt">
            <!--            <u&#45;&#45;input placeholder="请选择部门" border="none" v-model="department2" shape="circle"></u&#45;&#45;input>-->
            <view :class="department2?'':'fontclor'">{{ department2 ? department2 : '请選擇人員' }}</view>
          </view>
          <!-- <image src="../../../static/images/unfold_gray.png" style="width: 30rpx;height: 30rpx;"></image> -->
          <u-icon name="arrow-down" size="28rpx"></u-icon>
          <view v-if="isPart2" class="part_box">
            <scroll-view v-if="isPart2" scroll-y="true" style="height: 300rpx;">
              <view class="part_item" :class="actIndex==index?'act_part':''"
                    v-for="(item,index) in person" :key="index" @click="lookOne2(item,index)">
                {{ item.user_id }}
              </view>
            </scroll-view>
          </view>
        </view>

        <view class="title">
          訂單號
        </view>
        <view class="cel_box" @click="togglePart('isPart3');">
          <!-- 下拉选择器 -->
          <view class="sel_ipt">
            <!--            <u&#45;&#45;input placeholder="请选择訂單號" border="none" v-model="department3" shape="circle"></u&#45;&#45;input>-->
            <view :class="department3?'':'fontclor'">{{ department3 ? department3 : '请选择訂單號' }}</view>
          </view>
          <!-- <image src="../../../static/images/unfold_gray.png" style="width: 30rpx;height: 30rpx;"></image> -->
          <u-icon name="arrow-down" size="28rpx"></u-icon>
          <view v-if="isPart3" class="part_box">
            <scroll-view v-if="isPart3" scroll-y="true" style="height: 300rpx;">
              <view class="part_item" :class="actIndex==index?'act_part':''"
                    v-for="(item,index) in ordernolist" :key="index" @click="lookOne3(item,index)">
                {{ item.order_sn }}
              </view>
            </scroll-view>
          </view>
        </view>

        <view class="title">
          選擇商品
        </view>
        <view class="cel_box" @click="togglePart('isPart4')">
          <!-- 下拉选择器 -->
          <view class="sel_ipt">
            <!--            <u&#45;&#45;input placeholder="请選擇商品" border="none" v-model="department4" shape="circle"></u&#45;&#45;input>-->
            <view :class="department4?'':'fontclor'">{{ department4 ? department4 : '请選擇商品' }}</view>
          </view>
          <!-- <image src="../../../static/images/unfold_gray.png" style="width: 30rpx;height: 30rpx;"></image> -->
          <u-icon name="arrow-down" size="28rpx"></u-icon>
          <view v-if="isPart4" class="part_box">
            <scroll-view v-if="isPart4" scroll-y="true" style="height: 300rpx;">
              <view style="overflow: hidden;" class="part_item" :class="actIndex==index?'act_part':''"
                    v-for="(item,index) in salegoodlist" :key="index" @click="lookOne4(item,index)">
                {{ item.goods_name }}
              </view>
            </scroll-view>
          </view>
        </view>

        <view class="title">
          品牌
        </view>
        <view class="cel_box" @click="togglePart('isPart5')">
          <!-- 下拉选择器 -->
          <view class="sel_ipt">
            <!--            <u&#45;&#45;input placeholder="请选择品牌" border="none" v-model="department5" shape="circle"></u&#45;&#45;input>-->
            <view :class="department5?'':'fontclor'">{{ department5 ? department5 : '请选择品牌' }}</view>
          </view>
          <!-- <image src="../../../static/images/unfold_gray.png" style="width: 30rpx;height: 30rpx;"></image> -->
          <u-icon name="arrow-down" size="28rpx"></u-icon>
          <view v-if="isPart5" class="part_box">
            <scroll-view v-if="isPart5" scroll-y="true" style="height: 300rpx;">
              <view class="part_item" :class="actIndex==index?'act_part':''"
                    v-for="(item,index) in allbrand" :key="index" @click="lookOne5(item,index)">
                {{ item.brand_name }}
              </view>
            </scroll-view>
          </view>
        </view>

        <view class="title">
          行業
        </view>
        <view class="cel_box" @click="togglePart('isPart6')">
          <!-- 下拉选择器 -->
          <view class="sel_ipt">
            <!--            <u&#45;&#45;input placeholder="请选择行業" border="none" v-model="department6" shape="circle"></u&#45;&#45;input>-->
            <view :class="department6?'':'fontclor'">{{ department6 ? department6 : '请选择行業' }}</view>
          </view>
          <!-- <image src="../../../static/images/unfold_gray.png" style="width: 30rpx;height: 30rpx;"></image> -->
          <u-icon name="arrow-down" size="28rpx"></u-icon>
          <view v-if="isPart6" class="part_box">
            <scroll-view v-if="isPart6" scroll-y="true" style="height: 300rpx;">
              <view class="part_item" :class="actIndex==index?'act_part':''"
                    v-for="(item,index) in cn_type" :key="index" @click="lookOne6(item,index)">
                {{ item }}
              </view>
            </scroll-view>
          </view>
        </view>
        <view style="height: 500rpx;">

        </view>

      </view>
      <!-- 图表分析 -->
      <view v-if="currentIndex==1" class="">
        <echartsOne :data-set="ordernumber" ref="one"/>
        <echartsTwo :data-set="orderamount" ref="two"/>
      </view>
    </view>
    <view class="btns" v-if="currentIndex==0">
<!--      <view class="btn-item" @click="congzhi">-->
<!--        重置-->
<!--      </view>-->
<!--      <view class="btn-item" @click="seartable">-->
<!--        查詢原始表格-->
<!--      </view>-->
      <view class="btn-item" @click="xizaitable">
        下載表格
      </view>
    </view>
    <u-datetime-picker ref="datetimePicker" :show="showTime" v-model="valueStart" mode="date" :formatter="formatter"
                       title="开始时间" @confirm="confirmStart" @cancel="cancelStart"></u-datetime-picker>
    <u-datetime-picker ref="datetimePicker" :show="showTime1" v-model="valueEnd" mode="date" :formatter="formatter"
                       title="结束时间" @confirm="confirmEnd" @cancel="cancelEnd"></u-datetime-picker>
    <lingfeng-timepicker :rangeBtnActiveStyle="{color:'#645AED',borderColor:'#645AED'}" toolBarTitle="選擇時間"
                         ref="timePop" type="date-range" :defaultData="defaultData" :minDate="minDate"
                         :maxDate="maxDate"
                         @change="timeChange"></lingfeng-timepicker>

  </view>
</template>

<script>
import {
  getsaleorder,
  getbranch,
  getsalegood,
  getallbrand,
  getsalemember,
  gettable,
  getechartnumber,
  getechartamount,
  getdownload
} from '@/network/api/setting.js'
import echartsOne from './echarts/echartsOne.vue'
import echartsTwo from './echarts/echartsTwo.vue'
import {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} from 'vuex'

export default {
  components: {
    echartsTwo,
    echartsOne
  },
  data() {
    return {
      allchecked: false,
      minDate: {
        year: 2020,
        month: 5,
        date: 1
      },
      maxDate: {
        year: 2050,
        month: 5,
        date: 5
      },
      defaultData: {},
      dateRangeDefault: {
        startTime: '',
        endTime: '',
      },
      showTime: false,
      showTime1: false,
      beginTime: '',
      endTime: '',
      navItems: ['表格分析', '圖表分析'],
      currentIndex: 0,
      valueStart: Number(new Date()),
      valueEnd: Number(new Date()),
      checkboxValue1: [],
      checkboxValue2: [],
      department: '', //部门
      department1: '',
      department2: '',
      department3: '',
      department4: '',
      department5: '',
      department6: '',
      isPart: false, //选择部门
      isPart1: false,
      isPart2: false,
      isPart3: false,
      isPart4: false,
      isPart5: false,
      isPart6: false,
      clickCounts: {
        isPart: 0,
        isPart1: 0,
        isPart2: 0,
        isPart3: 0,
        isPart4: 0,
        isPart5: 0,
        isPart6: 0,
      },
      cn_type: [
        "博彩業",
        "工業",
        "服務業",
        "郵電",
        "通信",
        "社區服務",
        "批發",
        "零售業",
        "慈善機構"
      ],
      actIndex: 0,
      options: [{
        value: "日期",
        label: "time",
        check: true
      },
        {
          value: "分公司/分行",
          label: "branch",
          check: true
        },
        {
          value: "部門",
          label: "department",
          check: true
        },
        {
          value: "下單員",
          label: "member",
          check: true
        },
        {
          value: "訂單號",
          label: "order",
          check: true
        },
        {
          value: "商品",
          label: "goods",
          check: false
        },
        {
          value: "品牌",
          label: "brand",
          check: false
        },
        {
          value: "商品編號",
          label: "sn",
          check: false
        },
        {
          value: "商品數量",
          label: "num",
          check: false
        },
        {
          value: "商品單價",
          label: "unit_price",
          check: false
        },
        {
          value: "平均單價",
          label: "average_price",
          check: false
        },
        {
          value: "地區",
          label: "area",
          check: false
        },
        {
          value: "商品描述",
          label: "describe",
          check: false
        },
        {
          value: "行業平均單價",
          label: "industry_price",
          check: false
        },
        {
          value: "行業平均數量",
          label: "industry_number",
          check: false
        },
        {
          value: "澳門平均單價",
          label: "Macao_price",
          check: false
        },
        {
          value: "澳門平均數量",
          label: "Macao_number",
          check: false
        }
      ],
      ordernolist: [],
      branchlist: [],
      salegoodlist: [],
      allbrand: [], //品牌
      rawdata: {
        row: {
          date: 0,
          branch: 0,
          department: 0,
          user: 0,
          order: 0,
          goods: 0,
          goods_sn: 0,
          goods_number: 0,
          shop_price: 0,
          average_price: 0,
          brand: 0,
          area: 0,
          goods_desc: 0,
          industry_price: 0,
          industry_number: 0,
          Macao_price: 0,
          Macao_number: 0,
        },
        flow: {
          start: '',
          end: '',
          user: '',
          branch: '',
          department: '',
          order_id: '',
          brand: '',
          industry: '',
        },
        sortAttr: '',
        sortMode: '',
        page: 1,
      },
      member: [], //选择部门
      person: [],
      ordernumber: {
        dimensions: [],
        source: []
      },
      orderamount: {
        dimensions: [],
        source: []
      },
      // formatter: null
    }
  },
  computed: {
    ...mapState({
      islogin: state => state.user.islogin,
      userinfo: state => state.user.userinfo,
    }),

  },

  onShow() {

  },
  onLoad() {
    Promise.all([
      this.getsaleorderlist(),
      this.getbranchlist(),
      this.getallbrandlist(),
      this.getsalegoodlist(),
    ])
  },
  methods: {
    congzhi() {
      this.department = ''//部门
      this.department1 = ''
      this.department2 = ''
      this.department3 = ''
      this.department4 = ''
      this.department5 = ''
      this.department6 = ''
      this.beginTime = ''
      this.endTime = ''
      this.rawdata = {
        row: {
          date: 1,
          branch: 1,
          department: 1,
          user: 1,
          order: 1,
          goods: 0,
          goods_sn: 0,
          goods_number: 0,
          shop_price: 0,
          average_price: 0,
          brand: 0,
          area: 0,
          goods_desc: 0,
          industry_price: 0,
          industry_number: 0,
          Macao_price: 0,
          Macao_number: 0,
        },
        flow: {
          start: '',
          end: '',
          user: '',
          branch: '',
          department: '',
          order_id: '',
          brand: '',
          industry: '',
        },
        sortAttr: '',
        sortMode: '',
        page: 1,
      }
    },
    togglePart(partName) {
      // 获取当前选项的点击次数
      const clickCount = this.clickCounts[partName];

      // 根据点击次数切换选项的状态
      if (clickCount % 2 === 0) {
        // 第一次点击，打开选项
        this[partName] = true;
      } else {
        // 第二次点击，关闭选项
        this[partName] = false;
      }

      // 增加点击次数
      this.clickCounts[partName]++;

      // 关闭其他选项
      for (let prop in this) {
        if (prop.startsWith('isPart') && prop !== partName) {
          this[prop] = false;
          this.clickCounts[prop] = 0; // 重置其他选项的点击次数
        }
      }
    },
    setActivePart(partName) {
      this.isPart = false;
      this.isPart1 = false;
      this.isPart2 = false;
      this.isPart3 = false;
      this.isPart4 = false;
      this.isPart5 = false;
      this.isPart6 = false;
      if (partName === 'isPart') this.isPart = true;
      else if (partName === 'isPart1') this.isPart1 = true;
      else if (partName === 'isPart2') this.isPart2 = true;
      else if (partName === 'isPart3') this.isPart3 = true;
      else if (partName === 'isPart4') this.isPart4 = true;
      else if (partName === 'isPart5') this.isPart5 = true;
      else if (partName === 'isPart6') this.isPart6 = true;
    },
    async getEchartone() {
      let data = {
        lang: 'cn',
        release: this.dateRangeDefault.startTime,
        relend: this.dateRangeDefault.endTimee
      }
      const res = await getechartnumber(data)
      this.ordernumber.dimensions = res.data.name
      this.ordernumber.source = res.data.ordernum

    },
    async getEcharttwo() {
      let data = {
        lang: 'cn',
        release: this.dateRangeDefault.startTime,
        relend: this.dateRangeDefault.endTime
      }
      const res = await getechartamount(data)
      console.log(res, '1231312313');
      this.orderamount.dimensions = res.data.name
      this.orderamount.source = res.data.amount
    },
    async seartable() {
      const filterlist = this.options.filter(item => item.check === true);
      console.log(filterlist);
      if (filterlist.length === 0) {
        // 如果没有选择项目，则提示用户选择项目
        uni.showToast({
          title: "請選擇展示項",
          icon: "none"
        })
        return; // 不继续执行后续代码
      }
      let list = filterlist.map(item => item.label)
      this.rawdata.row = this.handleRow(list)
      console.log(this.rawdata);
      //加载中
      uni.showLoading({
        title: '加載中…'
      });
      // const res = await gettable(this.rawdata)
      // uni.hideLoading()
      const res = await getdownload(this.rawdata)
      uni.hideLoading()
      if (res.data.code == 1) {
        let ExcelUrl = res.data.excel
        // #ifdef H5
        window.open(
            ExcelUrl
        )
        // #endif
        // 微信下载文件需要在微信公众平台>开发>开发管理>服务器域名>downloadFile合法域名>配置白名单域名
        // #ifdef MP-WEIXIN
        uni.downloadFile({
          url: ExcelUrl,
          success: res => {
            console.log(res)
            if (res.statusCode === 200) {
              // 预览pdf文件
              uni.openDocument({
                filePath: res.tempFilePath,
                showMenu: true, // 右上角菜单，可以进行分享保存pdf
                success: function (file) {
                  console.log("file-success", file)
                }
              })
            }
          }
        })
        // #endif
        // #ifdef APP-PLUS
        uni.showLoading({
          title: '正在下载……'
        });
        uni.downloadFile({
          url: ExcelUrl,
          success: res => {
            console.log(res)
            if (res.statusCode === 200) {
              // 保存pdf文件至手机，一般安卓端存储路径为：手机存储/dcim/camera文件夹下
              uni.hideLoading()
              uni.saveFile({
                tempFilePath: res.tempFilePath,
                success: function (res) {
                  uni.showToast({
                    icon: 'success',
                    mask: true,
                    // title: '文件已保存：' + res.savedFilePath, //保存路径
                    title: '下载成功',
                    duration: 2000,
                  });
                  setTimeout(() => {
                    var filePath = res.savedFilePath;
                    uni.openDocument({ //新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。
                      filePath: filePath,
                      showMenu: true,
                      success: function (res) {
                        console.log('打开文档成功');
                      }
                    });
                  }, 1000)
                }
              })
            }
          },
          fail: (err) => {
            console.log(err);
            uni.showToast({
              icon: 'none',
              mask: true,
              title: '文件下载失败',
            });
          },
        })
        // #endif
      }
    },
    async xizaitable() {

      const filterlist = this.options.filter(item => item.check === true);
      console.log(filterlist);
      if (filterlist.length === 0) {
        // 如果没有选择项目，则提示用户选择项目
        uni.showToast({
          title: "請選擇展示項",
          icon: "none"
        })
        return; // 不继续执行后续代码
      }

      let list = filterlist.map(item => item.label)
      this.rawdata.row = this.handleRow(list)
      //加载中
      uni.showLoading({
        title: '加載中…'
      });
      const res = await getdownload(this.rawdata)
      uni.hideLoading()
      if (res.data.code == 1) {
        let ExcelUrl = res.data.excel
        // #ifdef H5
        window.open(
            ExcelUrl
        )
        // #endif
        // 微信下载文件需要在微信公众平台>开发>开发管理>服务器域名>downloadFile合法域名>配置白名单域名
        // #ifdef MP-WEIXIN
        uni.downloadFile({
          url: ExcelUrl,
          success: res => {
            console.log(res)
            if (res.statusCode === 200) {
              // 预览pdf文件
              uni.openDocument({
                filePath: res.tempFilePath,
                showMenu: true, // 右上角菜单，可以进行分享保存pdf
                success: function (file) {
                  console.log("file-success", file)
                }
              })
            }
          }
        })
        // #endif
        // #ifdef APP-PLUS
        uni.showLoading({
          title: '正在下载……'
        });
        uni.downloadFile({
          url: ExcelUrl,
          success: res => {
            console.log(res)
            if (res.statusCode === 200) {
              // 保存pdf文件至手机，一般安卓端存储路径为：手机存储/dcim/camera文件夹下
              uni.hideLoading()
              uni.saveFile({
                tempFilePath: res.tempFilePath,
                success: function (res) {
                  uni.showToast({
                    icon: 'success',
                    mask: true,
                    // title: '文件已保存：' + res.savedFilePath, //保存路径
                    title: '下载成功',
                    duration: 2000,
                  });
                  setTimeout(() => {
                    var filePath = res.savedFilePath;
                    uni.openDocument({ //新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。
                      filePath: filePath,
                      showMenu: true,
                      success: function (res) {
                        console.log('打开文档成功');
                      }
                    });
                  }, 1000)
                }
              })
            }
          },
          fail: (err) => {
            console.log(err);
            uni.showToast({
              icon: 'none',
              mask: true,
              title: '文件下载失败',
            });
          },
        })
        // #endif
      }

    },
    async lookOne(item, index) {
      this.department = item.branchname
      this.actIndex = index
      this.rawdata.flow.branch = item.branch_id
      let data = {
        company_id: this.userinfo.company_id,
        branch_id: item.branch_id
      }
      const res = await getsalemember(data)
      this.member = res.data.department
    },
    lookOne1(item, index) {
      this.department1 = item.departmentname
      this.actIndex = index
      this.rawdata.flow.department = item.department_id
      this.person = item.user
    },
    lookOne2(item, index) {
      this.department2 = item.user_id
      this.actIndex = index
      this.rawdata.flow.user = item.id
    },
    lookOne3(item, index) {
      this.department3 = item.order_sn
      this.actIndex = index
      this.rawdata.flow.order_id = item.order_id
    },
    lookOne4(item, index) {
      this.department4 = item.goods_name
      this.actIndex = index
      this.rawdata.flow.goods = item.goods_id
    },
    lookOne5(item, index) {
      this.department5 = item.brand_name
      this.actIndex = index
      this.rawdata.flow.brand = item.brand_id
    },
    lookOne6(item, index) {
      this.department6 = item
      this.actIndex = index
      this.rawdata.flow.industry = item
    },
    async getallbrandlist() {
      const res = await getallbrand()
      this.allbrand = res.data.brand
    },
    async getsalegoodlist() {
      const res = await getsalegood()
      this.salegoodlist = res.data.goods
    },
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      }
      if (type === 'month') {
        return `${value}月`
      }
      if (type === 'day') {
        return `${value}日`
      }
      return value
    },
    async getbranchlist() {
      let data = {
        company_id: this.userinfo.company_id,
        branch_id: null
      }
      // 加载中
      uni.showLoading({
        title: '數據加載中…，請稍後',
      });
      const res = await getbranch(data)
      uni.hideLoading()
      this.branchlist = res.data.branch
    },
    async getsaleorderlist() {
      const res = await getsaleorder()
      console.log(res);
      this.ordernolist = res.data.order

    },
    rightClick() {
      this.defaultData = this.dateRangeDefault;
      this.$refs.timePop.show();
    },
    async timeChange(val) {
      this.dateRangeDefault.startTime = val[0];
      this.dateRangeDefault.endTime = val[1];
      // 加载中
      uni.showLoading({
        title: '加載中…'
      });
      await this.getEchartone()
      await this.getEcharttwo()
      uni.hideLoading()
      //nexttick
      this.$nextTick(() => {
        this.$refs.one.init()
        this.$refs.two.init()
      })
    },
    toStart() {
      this.showTime = true
      this.showTime1 = false
    },
    toEnd() {
      this.showTime1 = true
      this.showTime = false
    },
    confirmStart(e) {
      let date = new Date(e.value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? ('0' + MM) : MM; //月补0
      let d = date.getDate();
      d = d < 10 ? ('0' + d) : d; //天补0
      this.beginTime = y + '-' + MM + '-' + d; //年月日
      this.rawdata.flow.start = this.beginTime
      this.showTime = false
    },
    cancelStart(e) {
      this.showTime = false
    },
    cancelEnd(e) {
      this.showTime1 = false
    },
    open() {

    },
    change() {

    },
    close() {

    },
    confirmEnd(e) {
      let date = new Date(e.value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? ('0' + MM) : MM; //月补0
      let d = date.getDate();
      d = d < 10 ? ('0' + d) : d; //天补0
      this.endTime = y + '-' + MM + '-' + d; //年月日
      this.rawdata.flow.end = this.endTime
      this.showTime1 = false
    },

    Allchange(n) {
      this.allchecked = !this.allchecked
      if (this.allchecked) {
        this.options.forEach(item => {
          item.check = true
        })
      } else {
        this.options.forEach(item => {
          item.check = false
        })
      }
    },
    checkboxChange(item) {
      item.check = !item.check
      this.allchecked = this.options.every(item => item.check);
    },
    async changeTab(index) {
      this.currentIndex = index;
      //强制刷新
      this.$forceUpdate()
      // this.getEchartone()
      // this.getEcharttwo()
      // 这里可以根据选项的索引值进行不同的处理，例如切换内容或显示不同的组件等
      if (index == 1) {
        console.log(11)
        uni.showLoading({
          title: '加載中…'
        });
        await this.getEchartone()
        await this.getEcharttwo()
        uni.hideLoading()
        this.$nextTick(() => {
          this.$refs.one.init()
          this.$refs.two.init()
        })
      }
    },
    leftClick(url) {
      uni.switchTab({
        url: url
      })
    },
    handleRow(list) { // 处理提交展示项参数
      return {
        date: list.includes("time") ? 1 : 0,
        branch: list.includes("branch") ? 1 : 0,
        department: list.includes("department") ? 1 : 0,
        user: list.includes("member") ? 1 : 0,
        order: list.includes("order") ? 1 : 0,
        goods: list.includes("goods") ? 1 : 0,
        goods_sn: list.includes("sn") ? 1 : 0,
        goods_number: list.includes("num") ? 1 : 0,
        shop_price: list.includes("unit_price") ? 1 : 0,
        average_price: list.includes("average_price") ? 1 : 0,
        brand: list.includes("brand") ? 1 : 0,
        area: list.includes("area") ? 1 : 0,
        goods_desc: list.includes("describe") ? 1 : 0,
        industry_price: list.includes("industry_price") ? 1 : 0,
        industry_number: list.includes("industry_number") ? 1 : 0,
        Macao_price: list.includes("Macao_price") ? 1 : 0,
        Macao_number: list.includes("Macao_number") ? 1 : 0
      }
    },
  }
}
</script>

<style lang="scss">
.content {
  position: relative;

  .fontclor {
    color: #9999a4
  }

  .btns {
    position: fixed;
    bottom: 30rpx;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #FFFFFF;

    .btn-item {
      padding: 0 85rpx;
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      background: #645AED;
      border-radius: 24rpx;
    }
  }

  .main {
    .nav {
      background-color: white;
      height: 88rpx;
      line-height: 88rpx;
      display: flex;
      justify-content: space-around;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #666666;
    }

    .active {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #1F1F1F;
      border-bottom: 5rpx solid #645AED;
    }

    .table {
      .title {
        margin: 24rpx 30rpx;
        font-size: 28rpx;
      }

      .cbox1 {
        margin: 0 32rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .lines {
          padding: 10rpx;
        }

        .cbox-item {
          .time-item {
            width: 300rpx;
            background-color: #f2f2f2;
            height: 64rpx;
            border-radius: 32rpx;
            text-align: center;
            line-height: 64rpx;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
          }
        }
      }

      .cel_box {
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 650rpx;
        height: 60rpx;
        border-radius: 30rpx;
        background-color: #f2f2f2;
        padding: 0 20rpx;
        position: relative;
      }

      .part_box {
        // 滚动条样式
        /deep/ ::-webkit-scrollbar {
          /*滚动条整体样式*/
          width: 4px !important;
          height: 1px !important;
          overflow: auto !important;
          background: #ccc !important;
          -webkit-appearance: auto !important;
          display: block;
        }

        /deep/ ::-webkit-scrollbar-thumb {
          /*滚动条里面小方块*/
          border-radius: 10px !important;
          box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
          background: #7b7979 !important;
        }

        /deep/ ::-webkit-scrollbar-track {
          /*滚动条里面轨道*/
          // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
          // border-radius: 10px !important;
          background: #FFFFFF !important;
        }


        position: absolute;
        background-color: white;
        z-index: 999;
        left: 20rpx;
        top: 60rpx;
        width: 400rpx;
        height: 300rpx;
        box-shadow: 0rpx -3rpx 6rpx 0rpx rgba(0, 0, 0, 0.40);
        //y轴滚动条


        .part_item,
        .act_part {
          width: 320rpx;
          height: 60rpx;
          font-size: 24rpx;
          color: #000;
          line-height: 60rpx;
          padding: 0 40rpx;
        }

        .act_part {
          background-color: #f2f2f2;
        }
      }


    }
  }
}
</style>
